<template>
  <div class="subPage" >
    <!-- 0专家1专科2团队 -->
    <div class="zjtip" v-if="details.category == 1">
        <p style="width:92%;margin:0 auto;text-align:left">请您点击“开始排队”,就诊人无法完成人脸验证时,可选择注册人进行人脸验证,请确保信息真实可靠，否则自行承担法律责任!</p>
      </div>
      <div class="zjtip" v-else-if="details.category == 0">
        <p style="width:92%;margin:0 auto;text-align:left">请您点击"开始排队",就诊人无法完成人脸验证时,可选择注册人进行人脸验证,请确保信息真实可靠,否则自行承担法律责任!</p>
      </div>
      <div class="zjtip" v-if="details.category==3||details.category==4||details.category==5">
        <p style="width:92%;margin:0 auto;text-align:center">医生将在24小时内接诊,如未接诊自动退款如您有紧急就诊需求,请到线下医院就诊</p>
      </div>
      <div style="margin-top:100rpx" v-else></div>
    <div class="successBox">

      <img :src="successImg" class="suImg">
      <img src="/static/images/entry.png" alt="" class="entryImg" v-if="details.category==0||details.category==1">
      <p class="btn" v-if="details.category==0||details.category==1" @click="goRoom">
        开始排队
      </p>
      <div v-if="details.category==3||details.category==4||details.category==5" class="yinpin">您已成功预约&nbsp;&nbsp;{{details.category_str}}</div>
      <div v-else class="else">
        您已成功挂号&nbsp;&nbsp;{{details.category_str}}
      </div>
      <div><span>支付金额：</span><span class="redClolr">¥</span><span class="price">{{details.pay_value}}</span></div>

      <div class="chooseAccount" v-if="verificationModal">
        <div class="modalBox">
          <!-- <div class="modalTit">
              <img src="/static/images/videoTit.png">
            </div> -->
          <div class="closeBox" @click="verificationModal=false">
            <img :src="closeImg" />
          </div>
          <div class="modalCenter">
            <!-- <picker  name="picker_hx" class="picClass"  v-model="pic_array[pic_index].id" :data-selecthx="pic_array[pic_index].name" :range-key="pic_array[pic_index].name" :range="pic_array" @bindchange="bindPickerChange">
                <div class="picker">
                  {{pic_array[pic_index].name}}
                </div>
              </picker> -->
            <!-- <picker
              name="regular_name"
              class="picClass"
              :value="hx_index"
              :range="userList"
              range-key="regular_name"
              @change="bindPickerChange"
            >
              <div class="picker">
                {{ userList.length != 0 ? userList[hx_index].regular_name : "" }}
              </div>
            </picker> -->
            <picker-view indicator-style="height: 50px;" style="width:100%;height:150px" :value="0" @change="bindPickerChange">
              <picker-view-column>
                <view class="picker" v-for="item in userList" :key="item.regular_id" style="line-height: 50px; text-align: center;color:rgba(34, 75, 198, 1);font-size:40rpx">{{item.regular_name}}</view>
              </picker-view-column>
            </picker-view>
          </div>
          <div class="modalFooter">
            <div class="btnLeft" @click="verificationModal=false">取消</div>
            <div class="btnRight" @click="lineUp(userList[hx_index])">确认</div>
          </div>
        </div>
      </div>
    </div>
    <p class="border" v-if="details.category==0||details.category==1"></p>
    <div :class="['orderBox',{'ipxBottom':ifIphonex}]">
      <div><span class="orderLabel">预约就诊编号：</span><span>{{details.apt_id}}</span></div>
      <div v-if="details.category==0||details.category==1"><span class="orderLabel" >预约就诊时间：</span><span>{{details.apt_diagnose_time}} / {{details.time}} {{details.apt_seq}}号</span></div>
      <div v-if="details.category==3||details.category==4||details.category==5||details.category==2"><span class="orderLabel" >预约支付时间：</span><span>{{details.pay_time}}</span></div>
      <div><span class="orderLabel">预约就诊科室：</span>
        <span >{{details.dept_name}} {{details.doctor_name?"/":""}} {{details.doctor_name?details.doctor_name:""}}
        </span>
      </div>
    </div>
    <div class="fotBtn" @click="toAppointmentDetails(1)">
      <img :src="leftIcon">
      <span class="blueClass">查看详情</span>
    </div>
    <div>
      <span class="hosClass">武汉大学人民医院</span>
      <span class="hosClass">湖北省人民医院</span>
    </div>
    <div class="modal" v-if="showSubscribeMessage">
      <div class="out">
        <div class="top">
          <p>请允许接收订阅消息</p>
          <p>为了及时的接收医生的回复消息，请允许【所有】消息类型提醒</p>
        </div>
        <div class="btm" v-if="mainSwitch">
          <button class="sure" @click="subscribeMessage">我知道了</button>
        </div>
        <div v-else class="btm" >
          <span @click="showSubscribeMessage = false">取消</span>
          <span @click="goSetting">去设置</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import { mapState } from 'vuex'
//   import nim from '@/utils/nim'
  import storage from '@/utils/storage'
  import api from '@/api/api'
  //  import nim from '@/utils/nim'
//   import Bus from '@/utils/bus.js'
//   const { $Toast, $Message } = require('../../../../../static/iview/base/index')
//   import visitingTips from '@/components/visitingTips.vue'
  export default {
    components: {
    },
    data () {
      return {
        dataInfo:{},
        details: {},
        typeKey: false,
        years: [10,20,30,40,50],
        imgUrl: '',
        closeImg: '',
        successImg: '',
        userList: [],
        hx_index: 0,
        nowRegularId: '',
        verificationModal: false,
        nowAptId: '',
        BizToken: '',
        leftIcon: '',
        showSubscribeMessage: true,
        mainSwitch: true,
      }
    },
    computed: {
      ...mapState([
        'ifIphonex'
      ])
    },
    mounted () {

    },
    // onUnload: function () {
    //   wx.redirectTo({
    //     url: '/pages/subPage/register/dept/main'
    //   })
    //   // this.$router.replace(`/pages/subPage/register/dept/main`)
    // },
    onLoad (options) {
      this.typeKey = false
      this.showSubscribeMessage=true
      this.mainSwitch=true
    },
    onUnload () {
      if (!this.typeKey) {
        this.$router.replace(`/pages/center/child/appointmentRecord/main`)
      }
    },
    methods: {
      // 查看是否授权
      getSetting () {
        let that = this
        mpvue.getSetting({
          withSubscriptions: true,
          success (res) {
            console.log(res, 'res')
            if (res.subscriptionsSetting){
              that.mainSwitch = res.subscriptionsSetting.mainSwitch
            }
            // let subObj = res.subscriptionsSetting
            // if(!that.mainSwitch) {
            //   that.showSubscribeMessage = false
            //   mpvue.showModal({
            //     title: '无法接收所有消息类型提醒',
            //     content: '请在手机的“设置-订阅消息”选项中,允许接收订阅消息',
            //     showCancel: true,
            //     confirmText: '好',
            //     success (res) {
            //       if (res.confirm) {
            //         mpvue.openSetting({
            //           success: function (res) {
            //             console.log(res)
            //           }
            //         })
            //       } else if (res.cancel) {
            //       }
            //     }
            //   })
            // } else if (subObj['RiOFQbXvp4tcCp0G9e_51ZeAlCW8SnCRcvN8x_SnEMg'] !== 'accept' || subObj['3jdfJiwLvdLOZeaE1BfkBDyd4BjJbJkZK40QyvTiSbI'] !== 'accept' || subObj['4p208nzEPlI7GdeXgxdGbaEOZTK5mv3wFhWqB27_rhM'] !== 'accept') {
            //   that.showSubscribeMessage = true
            // }
          }
        })
      },
      subscribeMessage () {
        let that = this
        that.showSubscribeMessage = false
        wx.requestSubscribeMessage({
          tmplIds: [
            'RiOFQbXvp4tcCp0G9e_51ZeAlCW8SnCRcvN8x_SnEMg',
            '3jdfJiwLvdLOZeaE1BfkBDyd4BjJbJkZK40QyvTiSbI',
            '4p208nzEPlI7GdeXgxdGbaEOZTK5mv3wFhWqB27_rhM'],
          success: function(res) {
            if (res['RiOFQbXvp4tcCp0G9e_51ZeAlCW8SnCRcvN8x_SnEMg'] !== 'accept' || res['3jdfJiwLvdLOZeaE1BfkBDyd4BjJbJkZK40QyvTiSbI'] !== 'accept' || res['4p208nzEPlI7GdeXgxdGbaEOZTK5mv3wFhWqB27_rhM'] !== 'accept') {
              mpvue.showModal({
                title: '无法接收所有消息类型提醒',
                content: '请在手机的“设置-订阅消息”选项中,允许接收订阅消息',
                showCancel: true,
                confirmText: '好',
                success (res) {
                  if (res.confirm) {
                    mpvue.openSetting({
                      success: function (res) {
                        console.log(res)
                        that.showSubscribeMessage = false
                      }
                    })
                  } else if (res.cancel) {
                  }
                }
              })
            } else {
              that.showSubscribeMessage = false
            }
          },
          fail: function (err) {
            if (err.errCode == 20004) {
              mpvue.showModal({
                title: '无法接收所有消息类型提醒',
                content: '请在手机的“设置-订阅消息”选项中,允许接收订阅消息',
                showCancel: true,
                confirmText: '好',
                success (res) {
                  if (res.confirm) {
                    mpvue.openSetting({
                      success: function (res) {
                        console.log(res)
                      }
                    })
                  } else if (res.cancel) {
                  }
                }
              })
            }
          }
        })
      },
      goSetting () {
        this.showSubscribeMessage = false
        mpvue.openSetting({
          success: function (res) {
            console.log(res)

          }
        })
      },
      toAppointmentDetails (jud) {
        this.typeKey = true
        let obj = {
          apt_id: this.dataInfo.apt_id
        }
        this.$store.commit(this.$types.TALK_INFO, obj)
        if (jud === 1) { // 图文查看详情
          this.$router.replace(`/pages/center/child/appointmentDetails/main?aptId=${this.dataInfo.apt_id}&key='1'`)
        } else {  // 专科问诊去排队
          this.$router.replace(`/pages/subPage/register/consultationRoom/main?apt_id=${this.dataInfo.apt_id}`);
        }
      },
       //进入云诊间
      goRoom() {
        console.log(this.dataInfo.apt_id)
        this.getRegularList(this.details)
        // this.$router.push(`/pages/subPage/register/consultationRoom/main?apt_id=${this.details.apt_id}`);
      },
      // 获取常用就诊人和主账号
      getRegularList (e) {
        console.log(e)
        this.nowAptId = e.apt_id
        this.$api.regularList({}, ({'showLoading': true})).then(res => {
          let list = []
          res.data.forEach(ele => {
            if (ele.is_main === '1') { // 判断是否为主账号
              list.push(ele)
            } else if (e.regular_id === ele.regular_id){
              list.push(ele) 
            }
          })
          this.userList = list
          if (this.userList.length === 1) {
            this.lineUp(this.userList[0])
          } else {
            this.verificationModal = true
          }
        })
      },
      lineUp (e) {
        let params = JSON.parse(JSON.stringify(e))
        params.apt_id = this.nowAptId
        this.getBizToken(params)
      },
      getBizToken (e) {
        this.$api.getBizToken({regular_id: e.regular_id}, ({'showLoading': true})).then(res => {
            this.BizToken = res.data
            this.verificationModal = false
            this.to(res.data,e)
          console.log(BizToken)
        })
      },
      to (e,data) {
        // let BizToken =  ''
          // 调用实名核身功能
          wx.startVerify({
              data: {
                  token: e // BizToken
              },
              success: (res) => { // 验证成功后触发
                  // res 包含验证成功的token, 这里需要加500ms延时，防止iOS下不执行后面的逻辑
                  setTimeout(() => {
                      // 验证成功后，拿到token后的逻辑处理，具体以客户自身逻辑为准
                      console.log('核身完成调用完成接口')
                      this.getDetectResult(e,data)
                      // this.getUserInfo(1)
                  }, 500);
              },
              fail: (err) => {  // 验证失败时触发
                  // err 包含错误码，错误信息，弹窗提示错误
                  setTimeout(() => {
                      wx.showModal({
                          title: "提示",
                          content: err.ErrorMsg,
                          showCancel: false
                      })
                  }, 500);
              }
          })
      },
      getDetectResult (e,data) {  // 验证成功后告诉后台
        console.log('核身id',e)
        console.log('当前数据', data)
        this.$api.getDetectResult({apt_id:data.apt_id, biz_token: e}, ({'showLoading': true})).then(res => {
           console.log('核身完成调用详情接口')
          // this.getUserInfo(1)
          this.toAppointmentDetails(2)  // 识别成功后跳转至详情页面
        })
      },
      getDetails() {
        this.$api.detail({apt_id: this.dataInfo.apt_id}, ({'showLoading': true})).then(res => {
          // console.log(res)
          this.details = res.data[0]
          this.details.pay_time = this.$utils.filterTime(this.details.pay_time, 4)
          if (!this.details.pay_value  || this.details.pay_value == 0) {
            this.details.pay_value = '0.0'
          } else {
            this.details.pay_value = parseFloat(this.details.pay_value).toFixed(1)
          }
          if( this.details.apt_diagnose_time){
             this.details.apt_diagnose_time = this.$utils.filterTime(this.details.apt_diagnose_time, 3)
          }
          if(this.details.period_id==1){
            this.details.time = '上午'
          }else if (this.details.period_id==2) {
            this.details.time = '下午'
          }else if (this.details.period_id==3) {
            this.details.time = '夜间'
          }
          // apt_diagnose_time
          console.log('this.details.category',this.details.category)
        })
      },
      bindPickerChange (e) {
        console.log(e)
        this.hx_index = e.mp.detail.value
        this.nowRegularId = this.userList[this.hx_index].regular_id
      },

    },
    onShow () {
      this.imgUrl = api.imgUrl
      this.successImg = this.imgUrl + 'success.png'
      this.leftIcon = this.imgUrl + 'leftIcon.png'
      this.closeImg = this.imgUrl + "close.png";
      // this.getWechatList()
      console.log(this.$route.query.data,898989)
      this.dataInfo = JSON.parse(this.$route.query.data)
       console.log(this.$route.query.data,898)
      if(this.dataInfo.apt_id) {
        this.getDetails()
      } else {
        setTimeout(() => {
          this.getDetails()
        }, 1000);
      }
      this.getSetting()
      console.log('书素数')
    },
    watch: {
      sessionsList: function(oldValue, newValue) {
        // this.dealData()
      }
    }
  }
</script>

<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    .zjtip{
      text-align: center;
      font-size:36rpx;
      font-weight:400;
      color:rgba(255,84,83,1);
      margin-top: 20rpx;
    }
    .successBox{
      margin-bottom: 50rpx;
      div{
        margin-top:20rpx;
        text-align: center;
      }
      span{
        display: inline-block;
        color: #333333;
        font-size:30rpx;
      }
      .suImg{
        width: 305rpx;
        height: 200rpx;
        // position: absolute;
        margin-left: 226rpx;
        margin-top: 60rpx;
      }
      .entryImg{
        position: absolute;
        width: 170rpx;
        height: 176rpx;
        margin-left: -440rpx;
        margin-top: 220rpx;

      }
      .else{
        color: #333;
        font-size: 30rpx;
      }
      .btn{
        width:200rpx;
        height:68rpx;
        background:linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%);
        border-radius:2px;
        line-height: 68rpx;
        text-align: center;
        color: #fff;
        margin: 30rpx auto;
        // margin-left: 250rpx;
      }
      .price{
        color: #FF5453;
      }
      .redClolr{
        color:#FF5453;
        font-size: 20rpx;
      }
      .chooseAccount {
        position: absolute;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        background: rgba(0, 0, 0, 0.6);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        z-index: 9;
        // background:rgba(0,0,0,1);
        // opacity:0.6;
        .modalBox {
          width: 617rpx;
          // height:663rpx;
          z-index: 99;
          background: #ffffff;
          border-radius: 12px;
          position: relative;
          .modalTit {
            width: 100%;
            img {
              width: 100%;
              height: 220rpx;
            }
          }
          .closeBox {
            width: 60rpx;
            height: 60rpx;
            position: absolute;
            right: -30rpx;
            top: -30rpx;
            img {
              width: 100%;
              height: 100%;
              z-index: 99;
            }
          }
          .modalCenter {
            padding: 67rpx 30rpx 33rpx 37rpx;
            display: flex;
            flex-direction: column;
            .picClass {
              height: 131rpx;
              line-height: 131rpx;
              text-align: center;
              border-top: 1rpx solid #e9e9e9;
              border-bottom: 1rpx solid #e9e9e9;
              div {
                font-size: 50rpx;
                font-weight: normal;
                color: rgba(34, 75, 198, 1);
              }
            }
            .dataBox {
              margin-bottom: 40rpx;
              span {
                display: inline-block;
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                vertical-align: middle;
              }
              .itemPie {
                width: 12rpx;
                height: 12rpx;
                background: rgba(74, 100, 234, 1);
                border-radius: 50%;
                margin-right: 15rpx;
                // vertical-align: middle;
                margin-bottom: 5rpx;
              }
              .itemSpan {
                width: 95%;
              }
            }
          }
          .modalFooter {
            div {
              width: 309rpx;
              height: 90rpx;
              font-size: 36rpx;
              font-weight: 400;
              display: inline-block;
              text-align: center;
              line-height: 90rpx;
            }
            .btnLeft {
              background: rgba(247, 248, 250, 1);
              border-radius: 0rpx 0rpx 0rpx 24rpx;
              color: #333333;
            }
            .btnRight {
              background: rgba(74, 100, 234, 1);
              border-radius: 0rpx 0rpx 24rpx 0rpx;
              color: #ffffff;
            }
          }
          .btnDis {
            background: #c5c8ce;
          }
        }
      }
    }
  }
  .border{
    width: 80%;
    margin-left: 10%;
    border:1rpx solid #e9e9e9
  }
  .successBox .yinpin{
    font-size:48rpx;
    font-weight:400;
    color:rgba(255,84,83,1);
  }
  .successBox>div:nth-child(3){
    font-size:30rpx;
    font-weight:300;
    color:rgba(51,51,51,1);
  }
  .orderBox{
    margin-top: 50rpx;
    margin-bottom: 125rpx;
    padding-left: 75rpx;
    text-align: center;
    div{
      margin-bottom: 20rpx;
      // text-align: center;
    }
    span{
      display: inline-block;
      font-size:30rpx;
      font-weight:400;
      color:rgba(51,51,51,1);
      width: 65%;
      text-align: left;
    }
    .orderLabel{
      font-size:30rpx;
      font-weight:300;
      color:rgba(102,102,102,1);
      // margin-right: 10rpx;
      text-align: right;
      width: 35%;

    }
  }
  .ipxBottom {
    margin-bottom: 50rpx;
  }
  .fotBtn{
    text-align: center;
    margin-bottom:56rpx;
    img{
      width: 32rpx;
      height: 30rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
    span{
      font-size:30rpx;
      font-weight:400;
      color:rgba(37,143,248,1);
      display: inline-block;
      vertical-align: middle;
      display: inline-block;
    }
  }
  .blueClass{
    text-align: center;
    color:rgba(37,143,248,1);
    vertical-align: middle;
    display: block;
  }
  .hosClass{
    text-align: center;
    font-size:26rpx;
    vertical-align: middle;
    display: block;
    // font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(204,204,204,1);
    margin-bottom: 10rpx;
  }
  .modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 1;
    z-index: 100;
    .out {
      height: 412rpx;
      border-radius: 15rpx;
      width: 650rpx;
      background: #fff;
      z-index: 999;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -206rpx;
      margin-left: -325rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top {
        flex: 1;
        padding: 77rpx 50rpx 20rpx 55rpx;
        p:nth-child(1) {
          height:50rpx;
          font-size:36rpx;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:50rpx;
          text-align: center;
          font-weight: bold;
          margin-bottom: 40rpx;
        }
        p:nth-child(2) {
          font-size:30rpx;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:42rpx;
        }
      }
      .btm {
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        .sure {
          background:#4A64EA;
          color: #fff;
          width: 100%;
        }
        span {
          flex: 1;
          text-align: center;
        }
        span:nth-child(1) {
          background: #f9f9f9;
        }
        span:nth-child(2) {
          background:#4A64EA;
          color: #fff;
        }
      }
    }
  }
</style>
